<template>
  <SkeletonLoading v-if="initLoading" />
  <view v-else>
    <view class="assets-box">
      <view class="total-item">
        <view class="assets-wrapper">
          <!-- 车辆总数、总资产 -->
          <view class="flex" style="min-height: 90rpx">
            <template v-for="(item, index) in summaryData.lineList1" :key="index">
              <view class="flex flex-col text-wrap" :class="{ 'pl-6': index == 1 }" style="width: 50%">
                <view class="flex items-center mb-2">
                  <span :class="{ 'mr-1': index == 0 }" class="text-white text-xs">{{ item.name }}</span>
                  <ve-tooltip placement="bottom-start" v-if="index == 0">
                    <template #content>
                      <view>1.总资产：车辆状态为空闲可租、租赁中、运维中、<br />已借出车辆的购置费、购置补充费之和</view>
                      <view>
                        2.车辆数：运营状态为空闲可租、租赁中、运维中、
                        <br />已借出且来源为自有、借调（借入）、挂靠/托管、 <br />融资租赁的车辆数之和
                      </view>
                      <view>3.此处展示当前最新车辆数及资产总额，不受时间<br />筛选影响</view>
                    </template>
                    <ve-icon class="text-white" name="headertip" :size="24" />
                  </ve-tooltip>
                </view>

                <view class="flex items-center" v-if="index === 0">
                  <CardTotal class="card-total" :value="item.totalAmount" thousandth unit="元" />
                </view>
                <view class="flex items-center" v-if="index === 1">
                  <CardTotal class="card-total" :value="item.count" unit="辆" />
                </view>
              </view>
            </template>
          </view>
          <ve-line color="#FFFFFF" length="100%" margin="16rpx 0 0 0"></ve-line>
          <!-- 车辆总数、总资产 end -->

          <view class="flex">
            <template v-for="(item, index) in summaryData.lineList2" :key="index">
              <view class="flex flex-col justify-center py-6 text-wrap" :class="{ 'pl-6': index == 1 }" style="width: 50%">
                <view class="flex items-center text-white text-xs mb-2">
                  <span>{{ item.name }}：</span>
                  <span> {{ item.count }} </span>辆
                </view>
                <view v-if="!item.name.includes('借入')" class="text-white text-xs">
                  <span>总资产：</span>
                  <span> {{ formatNumber(item.totalAmount) }} </span>元
                </view>
              </view>
              <ve-line v-if="index == 0" direction="col" color="#FFFFFF" length="100%"></ve-line>
            </template>
          </view>
          <ve-line color="#FFFFFF" length="100%"></ve-line>

          <view class="flex">
            <template v-for="(item, index) in summaryData.lineList3" :key="index">
              <view class="flex flex-col py-6 text-wrap" :class="{ 'pl-6': index == 1 }" style="width: 50%">
                <view class="flex items-center text-white text-xs mb-2">
                  <span>{{ item.name }}：</span>
                  <span> {{ item.count }} </span>辆
                </view>
                <view v-if="!item.name.includes('借入')" class="text-white text-xs">
                  <span>总资产：</span>
                  <span> {{ formatNumber(item.totalAmount) }} </span>元
                </view>
              </view>
              <ve-line v-if="index == 0" direction="col" color="#FFFFFF" length="100%"></ve-line>
            </template>
          </view>
        </view>
      </view>

      <CardWrap
        title="门店统计"
        :empty="summaryData.siteStatisticsList.length == 0"
        description="根据您的筛选统计数据时发现暂无数据，请重新筛选"
      >
        <card icon="store" :title="item.siteName" v-for="item in summaryData.siteStatisticsList" :key="item.siteId">
          <CardCell label="车辆数" :value="item.count" unit="辆" />
        </card>
        <CardFold ref="cardFoldRef" v-if="tmpSiteStatisticsList.length > 6" @change="handleCardFoldChange" />
      </CardWrap>
    </view>
  </view>
</template>
<script setup lang="ts">
  import card from '../components/card/index.vue'
  import CardWrap from '../components/card/card-wrap.vue'
  import CardCell from '../components/card/card-cell.vue'
  import CardFold from '../components/card/card-fold.vue'
  import CardTotal from '../components/card/card-total.vue'
  import SkeletonLoading from '../components/skeleton-loading.vue'

  import { totalAssetStatistics } from '@/api/revenue/assets'
  import { formatNumber } from '@/utils'
  import { reactive, ref } from 'vue'

  const props = defineProps({
    refreshUpdateTime: {
      type: Function,
      default: () => {},
    },
  })

  const initLoading = ref(true)
  // 获取总资产统计
  const summaryData = reactive<any>({
    ineList1: [],
    lineList2: [],
    lineList3: [],
    siteStatisticsList: [],
  })
  const tmpSiteStatisticsList = ref<any>([])

  const handleCardFoldChange = (value: boolean) => {
    if (value) {
      summaryData.siteStatisticsList = tmpSiteStatisticsList.value.slice(0, 6)
    } else {
      summaryData.siteStatisticsList = tmpSiteStatisticsList.value
    }
  }

  const cardFoldRef = ref()
  const loadData = (params: any = {}) => {
    const queryParam = {
      siteIdList: params.siteIdList,
    }

    summaryData.lineList1 = []
    summaryData.lineList2 = []
    summaryData.lineList3 = []
    summaryData.siteStatisticsList = []

    totalAssetStatistics(queryParam).then((res: any) => {
      res.result.carStatisticsList.forEach((item: any) => {
        if (item.name === '总资产') {
          summaryData.lineList1.push({
            name: item.name,
            totalAmount: item.totalAmount,
          })
          summaryData.lineList1.push({
            name: '车辆总数',
            count: item.count,
          })
        }
      })
      summaryData.lineList2 = res.result.carStatisticsList.slice(1, 3)
      summaryData.lineList3 = res.result.carStatisticsList.slice(3, 5)

      if (res.result.siteStatisticsList.length > 6) {
        summaryData.siteStatisticsList = res.result.siteStatisticsList.slice(0, 6)
      } else {
        summaryData.siteStatisticsList = res.result.siteStatisticsList
      }
      tmpSiteStatisticsList.value = res.result.siteStatisticsList
      initLoading.value = false
      uni.hideLoading()
      console.log('总资产统计', summaryData)
      // 更新数据更新时间
      props.refreshUpdateTime(res.result.lastUpdateTime)
    })

    cardFoldRef.value?.handleFold(true)
  }

  defineExpose({
    loadData,
  })
</script>
<style lang="less" scoped>
  .car-loading {
    height: 50px;
  }
  .w-full {
    width: 100%;
  }
  .flex {
    display: flex;
  }
  .flex-auto {
    flex: 1 1 auto;
  }
  .flex-col {
    flex-direction: column;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .items-center {
    align-items: center;
  }
  .mr-1 {
    margin-right: 4rpx;
  }
  .mb-2 {
    margin-bottom: 8rpx;
  }
  .ml-2 {
    margin-left: 8rpx;
  }
  .pl-6 {
    padding-left: 24rpx;
  }
  .py-6 {
    padding-top: 24rpx;
    padding-bottom: 24rpx;
  }
  .text-white {
    color: #fff;
  }
  .text-xs {
    font-size: 24rpx;
  }
  .text-base {
    font-size: 32rpx;
  }
  .text-xl {
    font-size: 40rpx;
  }
  .text-wrap {
    white-space: normal;
    word-wrap: break-word;
  }
  .font-semibold {
    font-weight: 600;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .assets-box {
    background-color: #fff;

    .total-item {
      padding: 32rpx 24rpx 0;
    }
  }

  .assets-wrapper {
    min-height: 300rpx;
    padding: 16rpx 24rpx 0;
    background-image: url('@/static/images/assets-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }

  .card-total {
    :deep(.card-total__value) {
      font-weight: 600;
      font-size: 40rpx;
      color: #fff;
    }
    :deep(.card-total__unit) {
      color: #fff;
    }
  }
</style>
